<template>
	<view class="content">
		<!-- <image src="@/static/image/location_user.png"></image> -->
		<map enable-3D :style="fullMapStyle" :latitude="latitude" :longitude="longitude" :markers="markers"
			:polyline="polyline" :include-points="includePoints" show-location />
		<view style="position: fixed; left: 50%; transform: translateX(-50%); width: 95%; bottom: 50px;">
			<up-button @click="getLine" type="primary">导航</up-button>
			<up-button @click="getLocationDetail" type="success">打开地点详情</up-button>
			<ycy-tabbar />
		</view>

	</view>
</template>

<script setup>
	// 腾讯地图key: 4ZEBZ-LCKYN-IULFJ-SU2GZ-PJBXZ-PKBOO
	// 高德地图key: 46a74ab14818fa3ecc50442942c2d5f9
	import { computed, ref, toRefs } from "vue";
	import { onLoad, onReady } from "@dcloudio/uni-app"
	// import promisify from '@/uni.promisify.adaptor.js';
	
	
	const qqmapsdk = new QQMapWX({
		key: mapKey
	});
	onReady(() => {
		// console.log('station onReady11111', qqmapsdk);
	})
	onLoad(() => {
		// console.log('station onLoad');
		getUserLocation();
	})
	const latitude = ref(29.543546)
	const longitude = ref(106.455744)

	// 天星桥 派出所 29.543546,106.455744
	// 汽研院 29.671776, 106.479353
	const polyline = ref([])

	const fullMapStyle = computed(() => {
		const res = uni.getSystemInfoSync();
		return `width: ${ res.screenWidth }px; height: ${ res.screenHeight }px`
	})
	const userLocationMark = computed(() => ({
		id: -1,
		title: '您的位置',
		latitude: latitude.value,
		longitude: longitude.value,
		iconPath: '/static/image/location_user.png',
		width: 50,
		height: 50,
		callout: { //自定义标记点上方的气泡窗口 点击有效
			content: '您的位置', //文本
			color: '#ffffff', //文字颜色
			borderRadius: 8, //边框圆角
			padding: 8,
			bgColor: '#0000006A', //背景颜色
			display: 'ALWAYS', //常显
		},
	}))
	const markers = ref([userLocationMark])
	const includePoints = ref([{ latitude: latitude.value, longitude: longitude.value }])
	// console.log('markers', markers);

	const getUserLocation = () => {
		uni.getLocation({
			isHighAccuracy: true, // 开启地图精准定位
			type: 'gcj02',
			success: (res) => {
				latitude.value = res.latitude
				longitude.value = res.longitude
			},
			fail: () => {
				// uni.showModal({
				// 	title: '请打开定位功能后重试',
				// 	showCancel: false,
				// 	success: function(res) {

				// 	}
				// })
			}
		});
	}

	const getLine = () => {
		qqmapsdk.direction({
			mode: 'driving', //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving'
			from: {
				latitude: latitude.value,
				longitude: longitude.value
			}, //from参数不填默认当前地址
			to: {
				latitude: 29.671776,
				longitude: 106.479353
			},
			success: function(res, data) {
				console.log('getLine', res, data);
				const coors = res.result.routes[0].polyline,
					pl = [];
				//坐标解压（返回的点串坐标，通过前向差分进行压缩）
				const kr = 1000000;
				for (let i = 2; i < coors.length; i++) coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
				//将解压后的坐标放入点串数组pl中
				for (let i = 0; i < coors.length; i += 2) pl.push({ latitude: coors[i], longitude: coors[i + 1] })
				//设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
				latitude.value = pl[0].latitude;
				longitude.value = pl[0].longitude;
				const start = { latitude: pl[0].latitude, longitude: pl[0].longitude };
				const end = { latitude: pl[pl.length - 1].latitude, longitude: pl[pl.length - 1].longitude };
				markers.value = [userLocationMark, {
					id: 1,
					title: '终点',
					latitude: end.latitude,
					longitude: end.longitude,
					iconPath: '/static/image/location_car.png',
					width: 50,
					height: 50,
					callout: { //自定义标记点上方的气泡窗口 点击有效
						content: '终点', //文本
						color: '#ffffff', //文字颜色
						borderRadius: 8, //边框圆角
						padding: 8,
						bgColor: '#0000006A', //背景颜色
						display: 'ALWAYS', //常显
					},
				}];

				includePoints.value = [start, end];
				console.log('includePoints.value', includePoints.value);
				polyline.value = [{
					points: pl,
					arrowLine: true,
					color: '#00aa00dd',
					borderColor: '#008400dd',
					borderWidth: 2,
					width: 8
				}];
			},
			fail: function(error) {
				console.error('error', error);
			},
			complete: function(res) {
				console.log('complete', res);
			}
		});
	}

	const getLocationDetail = () => {
		uni.openLocation({
			name: '覃家岗派出所',
			latitude: latitude.value,
			longitude: longitude.value,
			success: function() {
				console.log('success');
			}
		});
	}

</script>

<style>

</style>
